<!DOCTYPE html>

<html lang="zh" xmlns:th="http://www.thymeleaf.org" class="mdd-index">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>学校列表</title>
    <meta name="charset" content="utf-8">
    <meta name="viewport"
          content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <meta http-equiv="Cache-Control" content="must-revalidate,no-cache">


    <link rel="stylesheet" th:href="@{/css/weui/weui.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui/weuix.css}">
    <link rel="stylesheet" th:href="@{/css/weui/jquery-weui.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui/swiper-3.2.5.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui/ectouch.css}"/>
    <link rel="stylesheet" th:href="@{/css/school-district/index.css}">

    <style>

        /*文字过多省略号显示*/
        #firstMenu li {
            overflow: hidden;
            white-space: nowrap;
            /* 文字超出宽度则显示ellipsis省略号 */
            text-overflow: ellipsis;
            width: 100%;
        }

        .menu-right {
            margin-left: 32%;
        }

        .menu-left {
            top: 44px;
            z-index: 1;
        }

        .takenItem_class {
            line-height: 20px;
        }
    </style>

</head>
<body>

<div class="weui-search-bar" style="position: fixed;width: 100%;z-index: 1000" id="searchBar">

    <div style="width: 100%;">
        <form class="weui-search-bar__form" action="" onsubmit="return false;">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required/>
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
    </div>

</div>


<div>
    <aside>
        <div style="width: 32%;" class="menu-left scrollbar-none" id="sidebar">
            <ul id="firstMenu">
            </ul>
        </div>
    </aside>
</div>


<div>
    <div >
        <section class="menu-right padding-all" id="context">
            <!--<div class='noContext'>请选择街道</div>-->
        </section>
    </div>
</div>
</body>

<script th:inline="javascript">
    var id = /*[[${id}]]*/ '';
    var ctx = /*[[@{/}]]*/ '';
    var content = /*[[${content}]]*/ '';
    var schoolArea = /*[[${schoolArea}]]*/ '';
</script>
<script type="text/javascript">
    var prefix = ctx + "school/district";
</script>

<script th:src="@{/js/jquery.min.js}"></script>

<script th:src="@{/js/jquery-weui.js}"></script>

<!--<script th:src="@{/Content/vendor/plugins/dynatree/jquery-weui.js}"></script>-->

<script th:src="@{/js/layer.min.js}"></script>

<script th:src="@{/js/ry-ui.js?v=3.0.0}"></script>


<script th:src="@{/js/school-district/school-list.js}"></script>


<script th:inline="javascript">

    schoolArea = (schoolArea == null || schoolArea == "null") ? "" : schoolArea;

    content = (content == null || content == "null") ? "" : content;

    /*暂无数据标签*/
    var noDataHtml = "<div style='width: 100%;padding-top:40%;color:#777779;text-align: center'><img style='width: 80%' src='"+ctx+"img/school-district/not-data.png"+"'/><h2>很遗憾!</h2><label>没有查询到数据</label></div>";


    $(function ($) {

        //初始化区划栏
        initAreaOptions();


        //回显搜索内容
        initContent();

        //调整左侧导航高度
        initLeftMenuStyle();


        //页面加载，获取所有区划的所有学校
        getSchoolList();

    });

    function initContent() {
        if (content !== null && content.length > 0) {
            $("#searchInput").val(content);
            $("#searchText").click();
        }
    }


    function initLeftMenuStyle() {
        var height = $("#searchBar").css("height");
        $(".menu-left").css("top", height);
    }


    /**
     * 获取学校集合
     */
    function getSchoolList() {
        $.showLoading("数据加载中");

        $.ajax({
            type: 'post',
            url: prefix + '/getSchoolList',
            data: {schoolArea:schoolArea,content:content},
            dataType: 'json',
            success: function (data,status,xhr) {

                if (xhr.status === 200) {
                    if (data.length ===0){
                        $("#context").html("").html(noDataHtml);
                        $.hideLoading();
                        return;
                    }else {
                        initSchoolList(data);
                    }

                } else {
                    $("#context").html("").html(noDataHtml);
                }
                $.hideLoading();
            },
            error: function () {
                $("#context").html("").html(noDataHtml);
                $.hideLoading();
            }
        });
    }


    /**
     * 初始化区划栏
     */
    function initAreaOptions() {

        var areaOptions = [
            {code:"320112",text:"江北新区"},
            {code:"320111",text:"浦口区"},
            {code:"320102",text:"玄武区"},
            {code:"320116",text:"六合区"},
            {code:"320105",text:"建邺区"},
            {code:"320115",text:"江宁区"},
            {code:"320104",text:"秦淮区"},
            {code:"320106",text:"鼓楼区"},
            {code:"320117",text:"溧水区"},
            {code:"320118",text:"高淳区"},
            {code:"320113",text:"栖霞区"},
            {code:"320114",text:"雨花台区"}
        ];



        var html = '';
        for(var i =0 ; i< areaOptions.length;i++){
            html += "<li onclick='changeFirstMenu(this);' " + (areaOptions[i].code == schoolArea && "class='active'") + " data-code='" + (areaOptions[i].code+'') + "'>" + areaOptions[i].text + "</li>";
        }

        $("#firstMenu").html('').html(html);

    }



</script>

</html>
